<!--
+----------------------------------------------------------------------
| 友得云客  - 开启房产营销新纪元
+----------------------------------------------------------------------
| Copyright (c) 2019~2023 优得（西安）信息科技有限公司版权所有
+----------------------------------------------------------------------
| Licensed 友得云客不是自由软件 未经允许不可移除相关版权
+----------------------------------------------------------------------
| Author: www.youdeyunke.com
+----------------------------------------------------------------------
-->
<template>
    <el-dialog :visible.sync="show" width="500px" :destroy-on-close="true" :close-on-click-modal="false">
        <el-form size="small" label-position="right" label-width="110px" v-loading="loading">

            <el-form-item label="小区名称" label-position="left">
                <el-input style="width: 300px" v-model="currentItem.sub_district_name" />
            </el-form-item>

            <el-form-item label="城市/区域">
                <city-district-selector size="small" custom-style="width: 300px"
                    v-model="currentItem.district_id"></city-district-selector>
            </el-form-item>

            <el-form-item label="版块" label-position="left">
                <el-input style="width: 300px" v-model="currentItem.block" />
            </el-form-item>

            <el-form-item label="面积">
                <el-input style="width: 300px" v-model="currentItem.area" type="number" />
            </el-form-item>

            <el-form-item label="楼层">
                <el-input style="width: 300px" v-model="currentItem.floor" />
            </el-form-item>

            <el-form-item label="总楼层">
                <el-input style="width: 300px" v-model="currentItem.total_floor" />
            </el-form-item>

            <el-form-item label="户型" label-position="left">
                <el-input style="width: 300px" v-model="currentItem.type_name" />
            </el-form-item>

            <el-form-item label="位置" label-position="left">
                <enumeration-selector cat="house_position" custom-style="width: 300px" v-model="currentItem.position"></enumeration-selector>
            </el-form-item>

            <el-form-item label="指导价">
                <el-input style="width: 300px" v-model="currentItem.guiding_price" type="number" />
            </el-form-item>

            <el-form-item label="成交价">
                <el-input style="width: 300px" v-model="currentItem.deal_price" type="number" />
            </el-form-item>

            <el-form-item label="签约日期">
                <el-date-picker style="width: 300px" v-model="currentItem.signed_at" type="datetime" placeholder="选择日期"  format="yyyy 年 MM 月 dd 日 HH:mm:ss"
                    value-format="yyyy-MM-dd HH:mm:ss">
                </el-date-picker>
            </el-form-item>

        </el-form>
        <span slot="footer" class="dialog-footer">
            <el-button size="mini" type="default" icon="el-icon-close" @click="cancleHandle" :disabled="loading">取消</el-button>
            <el-button size="mini" type="primary" icon="el-icon-check" @click="submitHandle" :disabled="loading">确定</el-button>
        </span>
    </el-dialog>
</template>

<script>
import CityDistrictSelector from "@/components/CityDistrictSelector";
import PostsSelector from "@/components/PostsSelector";
import {
    createDealinfo,
    updateDealinfo,
} from "@/api/dealinfo";
export default {
    name: "itemForm",
    components: { CityDistrictSelector },

    EnumerationSelectorprops: {},
    data() {
        return {
            currentItem: {},
            show: false,
            loading: false,
        };
    },
    computed: {
        canSubmit: function () {
            var h = this.currentItem;
            if (h.desc && h.name && h.expired_at) {
                return true;
            }
            return false;
        },
    },
    watch: {},
    methods: {
        openDialog: function (item) {
            this.currentItem = item;
            this.show = true;
        },

        cancleHandle: function () {
            this.show = false;
            this.currentItem = {};
        },
        submitHandle: function () {
            var isok = this.validate(this.currentItem);
            if (!isok) {
                return;
            }
            var isNew = !this.currentItem.id;
            if (isNew) {
                return this.doCreate();
            }
            return this.doUpdate();
        },

        doCreate: function () {
            this.loading = true;
            createDealinfo(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    this.$message.success("创建成功");
                    this.loading = false;
                    this.show = false;
                    this.$emit("change", {});
                }
            });
        },

        doUpdate: function () {
            var _this = this;
            this.loading = true;
            updateDealinfo(this.currentItem).then((resp) => {
                this.loading = false;
                if (resp.status == 0) {
                    _this.$message.success("保存成功");
                    _this.$emit("change", {});
                    this.show = false;
                    _this.loading = false;
                }
            });
        },

        validate: function (data) {

            if (!data.sub_district_name) {
                this.$message.error("请填写小区名称");
                return false;
            }
            if (!data.district_id) {
                this.$message.error("请选择所在区");
                return false;
            }
            if (!data.block) {
                this.$message.error("请填写版块");
                return false;
            }
            if (!data.area) {
                this.$message.error("请填写面积");
                return false;
            }
            if (!data.floor) {
                this.$message.error("请填写所在楼层");
                return false;
            }
            if (!data.total_floor) {
                this.$message.error("请填写总楼层");
                return false;
            }
            if (!data.type_name) {
                this.$message.error("请填写户型名称");
                return false;
            }
            if (!data.position) {
                this.$message.error("请填写房源位置");
                return false;
            }
            if (!data.guiding_price) {
                this.$message.error("请填写指导价");
                return false;
            }
            if (!data.deal_price) {
                this.$message.error("请填写成交价");
                return false;
            }
            if (!data.signed_at) {
                this.$message.error("请选择签约时间");
                return false;
            }

            // TODO
            return true;
        },
    },
};
</script>

<style scoped>
.tips ul {
    padding: 0;
    margin: 0;
}

.tips {
    font-size: 12px;
    color: #999;
}

.show-more {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    margin-top: 10px;
}

.icon-uploader {
    display: flex;
    justify-content: center;
    align-items: center;
    font-size: 35px;
    width: 100%;
    min-height: 100px;
    border: 2px dashed #f4f4f4;
}

.icon-uploader .el-upload {
    width: 100%;
    height: 100%;
}
</style>
